<template>
	<view>

		<view class="page-body">
			<form @submit="formSubmit" @reset="formReset">

				<view class="page-section">
					<view class="input-list">
						<view class="uni-list-cell">
							<view class="list-left">
								真实姓名：
							</view>
							<input class="uni-input" name="input" v-model="realname" placeholder="真实姓名" />
						</view>
					</view>
					<view class="input-list">
						<view class="uni-list-cell">
							<view class="list-left">
								银行卡号：
							</view>
							<input class="uni-input" name="input" v-model="bank_card" placeholder="银行卡号" />
						</view>
					</view>
					<view class="input-list">
						<view class="uni-list-cell">
							<view class="list-left">
								开户行：
							</view>
							<input class="uni-input" name="input" v-model="bank_name" placeholder="开户行" />
						</view>
					</view>
					<view class="input-list">
						<view class="uni-list-cell">
							<view class="list-left">
								开户地址：
							</view>
							<input class="uni-input" name="input" v-model="bank_address" placeholder="开户地址" />
						</view>
					</view>
				</view>

				<view class="btn-area">
					<button class="btn-submit" formType="submit" :loading="loading">绑定</button>
					<button type="default" formType="reset">取消</button>

				</view>
			</form>
			<view class='title'>
				<text>备注：</text></br>
				<text>1.银行卡信息只能改一次</text></br>
				<text>2.第二次修改必须通过客服操作。</text>
			</view>


		</view>
	</view>
</template>
<script>
	import CryptoJS from "../../components/crypto-js";
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				user:'',
				realname:'',
				bank_name:'',
				bank_address:'',
				bank_card:'',
				loading: false,

			}
		},
		onLoad() {
			this.user =  JSON.parse(this.member);
			this.realname = this.user['real_name'];
			this.bank_name = this.user['bank_name'];
			this.bank_address = this.user['bank_address'];
			this.bank_card = this.user['bank_card'];
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName', 'apiUrl', 'alipay','member']),
		methods: {
			...mapMutations(['login','back','storeMoney','storeToken']),
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			formSubmit: function(e) {
				if (this.name.length < 5) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 5 个字符'
					});
					return;
				}
				

				const data = {
					alipay: this.alipay,
					token: this.password,
				};

				this.loading = true;
				uni.request({
					url: this.apiUrl + 'app/register',
					method: 'POST',
					data: data,
					success: (data) => {
						console.log('fail' + JSON.stringify(data));

						//{"code":1,"msg":"\u767b\u5f55\u6210\u529f","data":{"member":{"id":444,"name":"lumen123","real_name":"\u5510sss","email":null,"phone":null,"qq":null,"weixin":null,"address":null,"money":"0.00"},"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9tLmNodWFucWk2NjgueHl6XC9hcHBcL2xvZ2luIiwiaWF0IjoxNTM4MjA2NjA2LCJleHAiOjE1MzgyMTAyMDYsIm5iZiI6MTUzODIwNjYwNiwianRpIjoiTjdpa3FMY2RnVUdKazhaMyIsInN1YiI6NDQ0LCJwcnYiOiI4NjY1YWU5Nzc1Y2YyNmY2YjhlNDk2Zjg2ZmE1MzZkNjhkZDcxODE4Iiwiand0bmFtZSI6Im1lbWJlciJ9.zxXBXGl-lQ9Dq9Mk9-b2PBaf_n__Zb14Eqg5iSw0ezQ"}}
						let msg = data.data.msg;
						uni.showToast({
							icon: 'none',
							title: msg
						});
						if (data.data.code == 1) {
							console.log('monye' + data.data.data.member.money);
							this.money = data.data.data.member.money;
							this.token = data.data.data.token;
							this.toMain(this.account, this.money, this.token);
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					},
					complete: () => {
						this.loading = false
					}
				})


			},
			toMain(userName, mainMoney, token) {
				this.login(userName);
				this.storeMoney(mainMoney);
				this.storeToken(token);

				uni.reLaunch({
					url: 'index',
				});
			},

			toBack() {
				uni.navigateBack();

			},
			
			formReset: function(e) {
				console.log("清空数据")
				this.chosen = ''
			}

		}
	}
</script>

<style>
	label {
		display: flex;
		flex-direction: row;
		min-width: 270upx;
		margin-right: 20upx;
	}

	page {
		background-color: white;
		padding-top: 50upx;

	}

	.title {
		padding: 40rpx 40rpx;
		font-size: 30upx;
	}

	.captcha_img {
		width: 150upx;
		height: 90upx;
		margin-top: 10upx;
	}

	
</style>
